<template>
	<view class="content">
		<navi-shell :back="false" title="旧浪News">
			<text class="iconfont icon-tinajia" @tap="clickAddBlog"></text>
			</navi-shell>
		<uni-search-bar placeholder="请输入关键词搜索" class="uni-searchbar" :radius="100" cancelButton="none" @confirm="search"
			@clear="clearKeywords" />
		<view class="none" v-if="blogs.length == 0">
			<!-- v-show -->
			<image src="../../static/icons/nodata.png" mode="widthFix" class="logo"></image>
			<text>抱歉，有相关文章</text>
		</view>
		<view v-else v-for="(blog,index) in blogs" :key="blog.id" class="item-container" @click="goBlog(blog.id)">
			<text class="item-title">{{blog.title}}</text>
			<rich-text :nodes="blog.description" class="item-content"></rich-text>
			<image :src="blog.picture" mode="widthFix" class="img item-picture"></image>
			<view>
				<view v-for="(tag,idx) in blog.tags" :key="idx" class="item-tag">{{tag}}</view>
			</view>
			<text class="iconfont icon-icon-arrow-down-filling img-menu" @click.stop="clickPopMenu(blog)"></text>
			<image :src="blog.user.avatar" mode="aspectFill" class="item-avatar" @click.stop="clickShowUser(blog.user)">
			</image>
			<view class="icon-container">
				<image v-if="good_ids.indexOf(blog.id) >=0" src="../../static/icons/ic_good_fill.png" class="icon"
					@click.stop="changeGood(blog.id,false)"></image>
				<image v-else src="../../static/icons/ic_good.png" class="icon" @click.stop="changeGood(blog.id,true)">
				</image>
				<text class="icon-text">{{blog.good}}</text>
				<image src="../../static/icons/ic_comment.png" class="icon"></image>
				<text class="icon-text">{{blog.comments.length}}</text>
				<image src="../../static/icons/ic_count.png" class="icon"></image>
				<text class="icon-text">{{blog.readCount}}</text>
			</view>
		</view>
		<view class="bottom" v-if="blogs.length == count||searching">
			----我是有底线的的----
		</view>
		<dialog-shell ref="shell" title="博主概况" @confirm="dosth">
			<text style="padding-left: 15rpx;padding-top: 15rpx;">{{userDesc}}</text>
		</dialog-shell>
		<login-dialog ref="login"></login-dialog>
        <text class="iconfont" @click="clickAddBlog"></text>
	</view>
</template>

<script>
	//import params from '../../utils/params.js'
	let page = 0
	export default {
		data() {
			return {
				blogs: [],
				count: -1, //每次从服务器获取数据，都会从message中得到服务器端数据总数，然后和blogs.length对比，如果相等，表示加载完成所有数据
				searching: false,
				good_ids: [],
				userDesc: ""
			}
		},
		onLoad() {
			console.log();
			this.$noti.add(this.$params.noti_blog_count, this, this.refreshCount)
			this.$noti.add(this.$params.noti_add_blog, this, this.display)
			let ids = uni.getStorageSync(this.$params.key_good_ids)
			if (ids) {
				this.good_ids = ids
			}
			let blogs = uni.getStorageSync(this.$params.key_blogs)
			if (blogs) {
				this.blogs = blogs
				this.count = blogs.length
			} else {
				this.getPagedBlogs()
			}
			// console.log(blogs);
		},
		onUnload() {
			this.$noti.remove(this.$params.noti_blog_count, this)
			this.$noti.remove(this.$params.noti_add_blog, this)
		},
		//下拉刷新
		onPullDownRefresh() {
			Page = 0
			this.blogs = []
			this.count = -1
			console.log("执行了下拉刷新");
			this.getPagedBlogs()
		},
		onReachBottom() {
			if (this.searching || this.blogs.length == this.count) {
				return
			}
			console.log("执行了onReachBottom")
			page += 1
			this.getPagedBlogs()
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 0){
				this.clickAddBlog()
			}
			
		},
		methods: {
			display(blog){
				console.log(blog);
				this.blogs = [blog, ...this.blogs]
				this.count += 1 
			},
			clickAddBlog(){
				uni.navigateTo({
					url:'/pages/add/add',
					success : res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			clickShowUser(user) {
				this.userDesc = "作者： " + user.nickName + "， 联系方式：" + user.email
				// this.$refs.shell.showDialog()
				this.$refs.login.show()

			},
			//确定按钮
			dosth() {
				uni.showToast({
					title: "自定义组件事件"
				});
			},
			getPagedBlogs() {
				let header = {
					"content-type": "application/json;charset=UTF-8",
					"page": page,
					"size": 3
				}
				let url = this.$params.host + this.$params.action_blogs_page
				this.$request.getWithParams(url, header, res => {
					res.data.data.forEach(b => {
						if (!b.picture.startsWith('http')) {
							b.picture = this.$params.host + b.picture
						}
						if (!b.user.avatar.startsWith('http')) {
							b.user.avatar = this.$params.host + b.user.avatar
						}
					})
					this.blogs = this.blogs.concat(res.data.data)
					this.count = parseInt(res.data.message) ///客户端利用更新时间对分页显示进行排序
					let temp = this.blogs
					temp.sort(function(b1, b2) {
						let ms1 = new Date(b1.updateTime).getTime()
						let ms2 = new Date(b2.updateTime).getTime()
						return ms2 - ms1
					})
					uni.setStorageSync(this.$params.key_blogs, temp)
					this.blogs = temp
				}, () => {
					uni.stopPullDownRefresh()
				})
			},
			search(e) {
				let kw = e.value
				if (kw.trim().length == 0) {
					return
				}
				this.searching = true
				this.blogs = []
				this.count = -1
				let url = this.$params.host + this.$params.action_search + kw
				this.$request.get(url, res => {
					res.data.data.forEach(blog => {
						if (blog.picture.startsWith('http')) {
							blog.picture = this.$params.host + blog.picture
						}
						blog.user.avatar = this.$params.host + blog.user.avatar
						this.blogs = this.blogs.concat(blog)
					})
				})
			},
			clearKeywords() {
				this.searching = false
				this.blogs = []
				page = 0
				this.getPagedBlogs()
			},
			changeGood(id, isGood) {
				if (isGood) {
					this.good_ids.push(id)
				} else {
					let index = this.good_ids.indexOf(id)
					if (index > -1) {
						this.good_ids.splice(index, 1)
					}
				}
				uni.setStorageSync(this.$params.key_good_ids, this.good_ids)
				this.switchGood(id, isGood)
			},
			switchGood(id, isGood) {
                          //todo:根据第isGood参数来发送不同的请求到服务器
				let action = isGood ? this.$params.action_good : this.$params.action_del_good
				let url = this.$params.host + action
				let data = {
					"id": id
				}
				this.$request.postParams(url, data, res => {
					this.blogs.forEach(b => {
						if (b.id == id) {
							b.good = res.data.data
						}
					})
				})
			},                
			clickPopMenu(blog) {                     //小三角形收藏和删除的事件处理
				uni.showActionSheet({
					itemList: ['收藏', '删除'],
					success: res => {
						if (res.tapIndex == 0) {

						} else {
							this.deleteBlog(blog)
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			switchMark(id) {
				console.log('点击了收藏');
			},
			deleteBlog(blog) {
				console.log('点击了删除');
				let index = thi.blogs.indexOf(blog)
				console.log(index);
				this.blogs.splice(index, 1)
			},
			goBlog(id) {              //跳转详情页     
				uni.navigateTo({
					url: '../blog/blog?id=' + id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			refreshCount(args) {    //刷新阅读数
				let id = args.id
				let count = args.count
				this.blogs.forEach(b => {
					if (b.id == id) {
						b.readCount = count
					}
				})
			},
			//点赞刷新
			refreshGood(id, good, good_ids) {
				this.blogs.forEach(b => {
					if (b.id == id) {
						b.good = good
						//发送请求
						this.good_ids = good_ids
					}
				})
			},
                  //刷新评论数
			refreshComment(cmt) {
				this.blogs.forEach(b => {
					if (b.id == cmt.blogId) {
						b.comments.push(cmt)
					}
				})
			},
		}
	}
</script>

<style>
	@import url("index.css");

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	/* .logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	} */

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8F8F94;
	}
</style>
